<html>
    
    <head>
        <title>
            Vue.js2.0仿微信应用
        </title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="icon" href="favicon.ico">
        <link href="https://sinacloud.net/vue-wechat/images/headers/header01.png"
        rel="apple-touch-icon-precomposed">
        <link href="css/chunk-17aa9f68.d374099c.css" rel="prefetch">
        <link href="css/chunk-21d7e693.9f19269a.css" rel="prefetch">
        <link href="css/chunk-3af015cb.45cfe2a3.css" rel="prefetch">
        <link href="css/chunk-4ae28482.cd8dba60.css" rel="prefetch">
        <link href="css/chunk-4c4430ae.8f08bb10.css" rel="prefetch">
        <link href="css/chunk-4da53c15.e4a5552d.css" rel="prefetch">
        <link href="css/chunk-56ed70a5.0a955af6.css" rel="prefetch">
        <link href="css/chunk-601c8140.ae685279.css" rel="prefetch">
        <link href="css/chunk-6d29962f.17585cf9.css" rel="prefetch">
        <link href="css/chunk-72de9ca8.9f62b727.css" rel="prefetch">
        <link href="css/chunk-7f3fe95c.3d91d5e3.css" rel="prefetch">
        <link href="css/chunk-9e045000.4e3ce48e.css" rel="prefetch">
        <link href="css/chunk-b41b6018.a0e79a61.css" rel="prefetch">
        <link href="css/chunk-d8f1123a.b056a437.css" rel="prefetch">
        <link href="css/chunk-db1548ba.17d26853.css" rel="prefetch">
        <link href="js/chunk-17aa9f68.bb205606.js" rel="prefetch">
        <link href="js/chunk-21d7e693.38373aab.js" rel="prefetch">
        <link href="js/chunk-2d0a4fcc.a4bbc4ae.js" rel="prefetch">
        <link href="js/chunk-2d0aa1d5.7e540302.js" rel="prefetch">
        <link href="js/chunk-2d0ae98a.bbc95643.js" rel="prefetch">
        <link href="js/chunk-2d0b30a8.f99ef8d5.js" rel="prefetch">
        <link href="js/chunk-2d0c80a0.59c842f6.js" rel="prefetch">
        <link href="js/chunk-2d0ced66.dae73558.js" rel="prefetch">
        <link href="js/chunk-2d0d7664.35b61893.js" rel="prefetch">
        <link href="js/chunk-2d0dd68c.0d44eb42.js" rel="prefetch">
        <link href="js/chunk-2d0dd7ce.07e60b0f.js" rel="prefetch">
        <link href="js/chunk-2d226c9c.35dc472e.js" rel="prefetch">
        <link href="js/chunk-3af015cb.d82fb788.js" rel="prefetch">
        <link href="js/chunk-4ae28482.7be3fd3d.js" rel="prefetch">
        <link href="js/chunk-4c4430ae.c7cb3029.js" rel="prefetch">
        <link href="js/chunk-4da53c15.fd127074.js" rel="prefetch">
        <link href="js/chunk-56ed70a5.0b9b87a8.js" rel="prefetch">
        <link href="js/chunk-601c8140.f80b5256.js" rel="prefetch">
        <link href="js/chunk-6d29962f.c5f3cfc8.js" rel="prefetch">
        <link href="js/chunk-6e414a46.7c2c8d48.js" rel="prefetch">
        <link href="js/chunk-72de9ca8.59428f13.js" rel="prefetch">
        <link href="js/chunk-7f3fe95c.fbf8662f.js" rel="prefetch">
        <link href="js/chunk-9e045000.594d9b89.js" rel="prefetch">
        <link href="js/chunk-b41b6018.11eca083.js" rel="prefetch">
        <link href="js/chunk-d8f1123a.e2a42011.js" rel="prefetch">
        <link href="js/chunk-db1548ba.8e6d7a49.js" rel="prefetch">
        <link href="css/app.736542db.css" rel="preload" as="style">
        <link href="js/app.b8ecce07.js" rel="preload" as="script">
        <link href="js/chunk-vendors.f6edd30e.js" rel="preload" as="script">
        <link href="css/app.736542db.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/chunk-b41b6018.a0e79a61.css">
        <script charset="utf-8" src="js/chunk-b41b6018.11eca083.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/chunk-9e045000.4e3ce48e.css">
        <script charset="utf-8" src="js/chunk-9e045000.594d9b89.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/chunk-21d7e693.9f19269a.css">
        <script charset="utf-8" src="js/chunk-21d7e693.38373aab.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/chunk-4c4430ae.8f08bb10.css">
        <script charset="utf-8" src="js/chunk-4c4430ae.c7cb3029.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/chunk-7f3fe95c.3d91d5e3.css">
        <script charset="utf-8" src="js/chunk-7f3fe95c.fbf8662f.js">
        </script>
    </head>
    
    <body>
        <div id="app">
            <div class="welcome hide">
                <img src="https://sinacloud.net/vue-wechat/images/welcome.jpg" alt="">
            </div>
            <div class="outter">
                <header class="app-header">
                    <div id="wx-header">
                        <div class="other">
                            <span class="iconfont icon-tips-jia" style="">
                            </span>
                            <span class="iconfont icon-tips-add-friend" style="display: none;">
                            </span>
                            <span style="display: none;">
                                添加朋友
                            </span>
                            <span class="iconfont icon-chat-friends" style="display: none;">
                            </span>
                            <ul class="tips-menu tips-close">
                                <li>
                                    <span class="iconfont icon-tips-xiaoxi">
                                    </span>
                                    <div>
                                        发起群聊
                                    </div>
                                </li>
                                <li class="">
                                    <span class="iconfont icon-tips-add-friend">
                                    </span>
                                    <div>
                                        添加朋友
                                    </div>
                                </li>
                                <li>
                                    <span class="iconfont icon-tips-saoyisao">
                                    </span>
                                    <div>
                                        扫一扫
                                    </div>
                                </li>
                                <li>
                                    <span class="iconfont icon-tips-fukuan">
                                    </span>
                                    <div>
                                        收付款
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="center">
                            <span>
                                微信
                            </span>
                            <span class="parentheses" style="display: none;">
                            </span>
                        </div>
                    </div>
                </header>
                <div id="search" class="" style="">
                    <div id="search_bar" class="weui-search-bar">
                        <form class="weui-search-bar__form">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search">
                                </i>
                                <input type="search" id="search_input" placeholder="搜索" class="weui-search-bar__input">
                                <a class="weui-icon-clear">
                                </a>
                            </div>
                            <label for="search_input" id="search_text" class="weui-search-bar__label">
                                <i class="weui-icon-search">
                                </i>
                                <span>
                                    搜索
                                </span>
                            </label>
                        </form>
                        <a id="search_cancel" class="weui-search-bar__cancel-btn">
                            取消
                        </a>
                    </div>
                    <article>
                        <h3 class="weui-media-box__desc">
                            搜索指定内容
                        </h3>
                        <div class="tag">
                            <span>
                                朋友圈
                            </span>
                            <span>
                                文章
                            </span>
                            <span>
                                公众号
                            </span>
                            <span>
                                小说
                            </span>
                            <span>
                                音乐
                            </span>
                            <span>
                                表情
                            </span>
                        </div>
                        <div class="weui-cells">
                            <a href="javascript:;" class="weui-cell weui-cell_access">
                                <div class="weui-cell__hd">
                                    <img src=""
                                    alt="" style="width: 20px; margin-right: 5px; display: block;">
                                </div>
                                <div class="weui-cell__bd">
                                    <p>
                                        朋友圈热文
                                    </p>
                                </div>
                                <div class="weui-cell__ft">
                                </div>
                            </a>
                        </div>
                    </article>
                </div>
                <section class="app-content">
                    <div id="wechat">
                        <ul class="wechat-list">
                            <li class="list-row line-bottom">
                                <div class="list-info">
                                    <div class="header-box">
                                        <i class="new-msg-count" style="display: none;">
                                            3
                                        </i>
                                        <i class="new-msg-dot" style="display: none;">
                                        </i>
                                        <div class="header">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/header01.png">
                                        </div>
                                    </div>
                                    <div class="desc-box">
                                        <div class="desc-time">
                                            22:04
                                        </div>
                                        <div class="desc-author">
                                            阿荡
                                        </div>
                                        <div class="desc-msg">
                                            <div class="desc-mute iconfont icon-mute" style="display: none;">
                                            </div>
                                            <span style="display: none;">
                                                阿荡:
                                            </span>
                                            <span>
                                                来呀 快活啊
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="operate-box">
                                    <div class="operate-unread">
                                        标为未读
                                    </div>
                                    <div class="operate-del">
                                        删除
                                    </div>
                                </div>
                            </li>
                            <li class="list-row line-bottom">
                                <div class="list-info">
                                    <div class="header-box">
                                        <i class="new-msg-count" style="display: none;">
                                            3
                                        </i>
                                        <i class="new-msg-dot">
                                        </i>
                                        <div class="header multi-header">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/header01.png">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/yehua.jpg">
                                        </div>
                                    </div>
                                    <div class="desc-box">
                                        <div class="desc-time">
                                            22:04
                                        </div>
                                        <div class="desc-author">
                                            收购万达讨论群
                                        </div>
                                        <div class="desc-msg">
                                            <div class="desc-mute iconfont icon-mute">
                                            </div>
                                            <span>
                                                夜华:
                                            </span>
                                            <span>
                                                我试一试
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="operate-box">
                                    <div class="operate-read">
                                        标为已读
                                    </div>
                                    <div class="operate-del">
                                        删除
                                    </div>
                                </div>
                            </li>
                            <li class="list-row line-bottom">
                                <div class="list-info">
                                    <div class="header-box">
                                        <i class="new-msg-count" style="display: none;">
                                            1
                                        </i>
                                        <i class="new-msg-dot" style="display: none;">
                                        </i>
                                        <div class="header multi-header">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/zhenji.jpg">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/zhugeliang.jpg">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/header01.png">
                                        </div>
                                    </div>
                                    <div class="desc-box">
                                        <div class="desc-time">
                                            22:04
                                        </div>
                                        <div class="desc-author">
                                            收购淘宝讨论群
                                        </div>
                                        <div class="desc-msg">
                                            <div class="desc-mute iconfont icon-mute">
                                            </div>
                                            <span>
                                                诸葛亮:
                                            </span>
                                            <span>
                                                冒个泡
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="operate-box">
                                    <div class="operate-unread">
                                        标为未读
                                    </div>
                                    <div class="operate-del">
                                        删除
                                    </div>
                                </div>
                            </li>
                            <li class="list-row line-bottom">
                                <div class="list-info">
                                    <div class="header-box">
                                        <i class="new-msg-count">
                                            3
                                        </i>
                                        <i class="new-msg-dot" style="display: none;">
                                        </i>
                                        <div class="header">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/sunquan.jpg">
                                        </div>
                                    </div>
                                    <div class="desc-box">
                                        <div class="desc-time">
                                            22:04
                                        </div>
                                        <div class="desc-author">
                                            孙权
                                        </div>
                                        <div class="desc-msg">
                                            <div class="desc-mute iconfont icon-mute" style="display: none;">
                                            </div>
                                            <span style="display: none;">
                                                孙权:
                                            </span>
                                            <span>
                                                容我三思
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="operate-box">
                                    <div class="operate-read">
                                        标为已读
                                    </div>
                                    <div class="operate-del">
                                        删除
                                    </div>
                                </div>
                            </li>
                            <li class="list-row line-bottom">
                                <div class="list-info">
                                    <div class="header-box">
                                        <i class="new-msg-count">
                                            1
                                        </i>
                                        <i class="new-msg-dot" style="display: none;">
                                        </i>
                                        <div class="header">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/sunshangxiang.jpg">
                                        </div>
                                    </div>
                                    <div class="desc-box">
                                        <div class="desc-time">
                                            22:04
                                        </div>
                                        <div class="desc-author">
                                            孙尚香2
                                        </div>
                                        <div class="desc-msg">
                                            <div class="desc-mute iconfont icon-mute" style="display: none;">
                                            </div>
                                            <span style="display: none;">
                                                孙尚香:
                                            </span>
                                            <span>
                                                夫君,身体要紧~
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="operate-box">
                                    <div class="operate-read">
                                        标为已读
                                    </div>
                                    <div class="operate-del">
                                        删除
                                    </div>
                                </div>
                            </li>
                            <li class="list-row line-bottom">
                                <div class="list-info">
                                    <div class="header-box">
                                        <i class="new-msg-count" style="display: none;">
                                            1
                                        </i>
                                        <i class="new-msg-dot">
                                        </i>
                                        <div class="header">
                                            <img src="https://sinacloud.net/vue-wechat/images/headers/guangyu.jpg">
                                        </div>
                                    </div>
                                    <div class="desc-box">
                                        <div class="desc-time">
                                            22:04
                                        </div>
                                        <div class="desc-author">
                                            关羽
                                        </div>
                                        <div class="desc-msg">
                                            <div class="desc-mute iconfont icon-mute">
                                            </div>
                                            <span style="display: none;">
                                                关羽:
                                            </span>
                                            <span>
                                                三姓家奴！
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="operate-box">
                                    <div class="operate-read">
                                        标为已读
                                    </div>
                                    <div class="operate-del">
                                        删除
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
                <footer class="app-footer">
                    <div id="wx-nav">
                        <nav>
                            <dl class="router-link-exact-active router-link-active">
                                <dt class="iconfont icon-wechat">
                                    <i class="new-msg-count" style="">
                                        2
                                    </i>
                                </dt>
                                <dd>
                                    微信
                                </dd>
                            </dl>
                            <dl class="">
                                <dt class="iconfont icon-contact">
                                </dt>
                                <dd>
                                    通讯录
                                </dd>
                            </dl>
                            <dl class="">
                                <dt class="iconfont icon-find">
                                    <i class="new-msg-dot">
                                    </i>
                                </dt>
                                <dd>
                                    发现
                                </dd>
                            </dl>
                            <dl class="">
                                <dt class="iconfont icon-me">
                                </dt>
                                <dd>
                                    我
                                </dd>
                            </dl>
                        </nav>
                    </div>
                </footer>
            </div>
            <!---->
        </div>
        <script src="js/chunk-vendors.f6edd30e.js">
        </script>
        <script src="js/app.b8ecce07.js">
        </script>
    </body>

</html>